<template>
  <div class="tabLine">
    <ul class="tabContent" v-for="(item, index) in listdata" :key="index">
      <li class="tabLi" v-for="(list, index) in item.list" :key="index">
        <div class="tabLi-div">
          <a
            href="https://www.mafengwo.cn/poi/choice/list?id=1083"
            class="menban"
            target="_blank"
            :style="`background: url(${list.picUrl})`"
          >
            <div class="title">
              <h3>{{ list.name }}</h3>
              <p>{{ list.text }}</p>
            </div>
          </a>
        </div>
      </li>
    </ul>
    <div class="more-box">
      <button class="more" @click="handleMore">加载更多</button>
    </div>
  </div>
</template>

<script>
import { reqgetPhoto } from "../../../api/photo";
export default {
  name: "Foodlist",
  // 子组件接收父组件传过来的信息
  props: {
    title: {
      type: String,
      default: "food",
    },
    play: {
      type: Array,
      default: function () {
        return [];
      },
    },
    hotle: {
      type: Array,
      default: () => [],
    },
    foot: {
      type: Array,
      default: function () {
        return []; //默认返回一个空数组
      },
    },
  },

  mounted() {},
  computed: {
    // 当点击谁就展示 对应的图片
    listdata() {
      if (this.title === "food") {
        // [1,2,3,4,5,6,]
        // this.list =
        // 遍历请求拿到的数据里面的每一项，加到默认页面展示的数据后
        this.foots.forEach((item) => {
          this.foot.push(item);
        });
        this.foots = [];
        return this.foot;
      } else if (this.title === "hotle") {
        this.hotles.forEach((item) => {
          this.hotle.push(item);
        });
        this.hotles = [];
        return this.hotle;
      } else if (this.title === "play") {
        this.plays.forEach((item) => {
          this.play.push(item);
        });
        this.plays = [];
        return this.play;
      }
      return [];
    },
  },
  data() {
    return {
      foots: [],
      hotles: [],
      plays: [],
      list: [],
    };
  },
  methods: {
    // 点击加载更多时，请求接口0拿一遍数据，将拿回来的数据整理为需要的形式，
    handleMore() {
      reqgetPhoto().then((res) => {
        console.log(res);
        // this.food = "``````res 干什么···";
        // this.hotle = "``````res 干什么···";
        // this.play = "``````res 干什么···";
        if (this.title === "food") {
          this.foots = [
            { list: res.data.hotelenjoy.data[0].list.slice(0, 3) },
            { list: res.data.hotelenjoy.data[0].list.slice(3, 7) },
            { list: res.data.hotelenjoy.data[0].list.slice(7, 10) },
          ];
        }
        if (this.title === "hotle") {
          this.hotles = [
            { list: res.data.hotelenjoy.data[1].list.slice(0, 4) },
            { list: res.data.hotelenjoy.data[1].list.slice(4, 7) },
            { list: res.data.hotelenjoy.data[1].list.slice(7, 11) },
          ];
        }
        if (this.title === "play") {
          this.plays = [
            { list: res.data.hotelenjoy.data[2].list.slice(0, 4) },
            { list: res.data.hotelenjoy.data[2].list.slice(4, 7) },
            { list: res.data.hotelenjoy.data[2].list.slice(7, 11) },
          ];
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.tabLine {
  .tabContent {
    list-style: none;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .tabLi {
      width: 250px;
      height: 250px;
      margin-right: 20px;
      position: relative;

      .tabLi-div {
        width: 220px;
        height: 250px;
        // 画六边形
        clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
      }

      .menban {
        display: block;
        position: static;
        width: 100%;
        height: 100%;
        background-size: 100% 100% !important;
        background-position: center !important;
        transition: all 0.6s;
        z-index: 11;
        box-shadow: inset 100px 100px 100px 100px rgba(0, 0, 0, 0.4);

        .title {
          width: 100px;
          height: 100px;
          position: absolute;
          top: 70px;
          left: 60px;

          h3 {
            font-size: 23px;
            line-height: 33px;
            color: #fff;
            text-align: center;
            padding-bottom: 10px;
            margin: 0;
          }

          p {
            font-size: 16px;
            line-height: 21px;
            color: #fff;
            text-align: center;
            margin: 0;
          }
        }
      }

      .menban:hover {
        background-size: 120% 120% !important;
        background-position: center !important;
        box-shadow: none;
      }
    }

    .tabLi::before {
      content: '';
      width: 230px;
      height: 250px;
      position: absolute;
      top: -10px;
      right: 0px;
      background: url('../../../assets/image/mdd_bg.png') no-repeat;
      background-size: 100%;
    }
  }
}

// .more-box {
// width: 100%;
// }
.more {
  display: block;
  width: 100px;
  height: 30px;
  color: #717376;
  font-size: 18px;
  line-height: 25px;
  border: 1px solid #717376;
  border-radius: 28px;
  background-color: #242323;
  cursor: pointer;
  // margin-top: 50px;
  margin: 50px auto 0;
}
</style>